<template>
  <div>
    <div class="center" v-if="data">
      <!-- f1导航栏 -->
      <div>
        <el-menu
          text-color="#000"
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">酒店</el-menu-item>
          <el-menu-item index="2">景点体验</el-menu-item>
          <el-menu-item index="3">美食</el-menu-item>
          <el-menu-item index="4">旅行者之选</el-menu-item>
          <el-submenu index="5">
            <template slot="title">···</template>
            <el-menu-item index="2-1">航空公司</el-menu-item>
            <el-menu-item index="2-2">下载app</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <!-- 面包屑 -->
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
          <el-breadcrumb-item>亚洲</el-breadcrumb-item>
          <el-breadcrumb-item>{{ data.country }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ data.city }}</el-breadcrumb-item>
          <!--<el-breadcrumb-item>颐和园</el-breadcrumb-item> -->
        </el-breadcrumb>
      </div>
      <!-- 景点标题区域 -->
      <div class="scenic_title">
        <div class="scenicTitle_left">
          <div>
            <h1>{{ data.title }}</h1>
          </div>
        </div>
        <div class="scenicTitle_right">
          <div>
            <button>
              <i class="el-icon-edit-outline"></i>
            </button>
          </div>
          <div>
            <button>
              <i class="el-icon-star-off"></i>
            </button>
          </div>
        </div>
      </div>
      <!-- 景点标签区域 -->
      <div class="city_tag">
        <div>
          <el-rate
            v-model="value"
            disabled
            text-color="#ff9900"
            score-template="{value}"
          >
          </el-rate>
          <a href="">
            <span>{{ data.dianping }}</span>
          </a>
        </div>

        <div>
          <a> · {{ data.city }}排名第1的景点体验 · </a>
        </div>

        <div>景点与地标 · 建筑 · 古迹徒步</div>
      </div>
      <!-- 评价+图 区域 -->
      <div class="scenic_show">
        <div class="scenicShow_left">
          <div class="scenicShow_left_rev">
            <div>
              <h1 style="margin: 10px">景点介绍</h1>
            </div>
            <div>
              <p v-html="data.description">{{ data.description }}</p>
            </div>
          </div>
        </div>
        <div class="scenicShow_right">
          <div class="swiperScenic">
            <!-- swiper1 -->
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
              v-if="imgs"
            >
              <swiper-slide v-for="(img, index) in imgs" :key="index">
                <img style="width: 100%" :src="`img/${img}`" alt="" />
              </swiper-slide>
              <div
                class="swiper-button-next swiper-button-white"
                slot="button-next"
              ></div>
              <div
                class="swiper-button-prev swiper-button-white"
                slot="button-prev"
              ></div>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper
              class="swiper gallery-thumbs"
              :options="swiperOptionThumbs"
              ref="swiperThumbs"
            >
              <!-- <swiper-slide>
                <img style="width: 100%" src="img/gg1.jpg" alt="" />
              </swiper-slide> -->
              <swiper-slide v-for="(img, index) in imgs" :key="index">
                <img style="width: 100%" :src="`img/${img}`" alt="" />
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
      <!-- 区域 区域 -->
      <div class="area1">
        <!-- 区域标题 -->
        <h2>区域</h2>
        <a class="addr">{{ data.postal }} {{ data.country }} {{ data.addr }}</a>
        <div class="area_left_right">
          <!-- 左侧 地址+推荐 -->
          <div class="area1_left">
            <div>附近的最佳景点/体验</div>
            <div class="nearby">
              <div class="eat">
                <div>餐厅</div>
                <div>在5公里内共找到 452 个地点</div>
                <div class="res">
                  <div class="res_1">
                    <img src="/detail_f2_img/nearby/baijiadayuan.jpg" alt="" />
                    <div>
                      <a href="">
                        <div>白家大院</div>
                        <div>
                          <span></span>
                          <span>159</span>
                        </div>
                        <div>4.1公里·¥¥¥¥·中餐·亚洲料理</div>
                      </a>
                    </div>
                  </div>
                  <div class="res_2">
                    <img
                      src="/detail_f2_img/nearby/jingtaigongguan.jpg"
                      alt=""
                    />
                    <div>
                      <a href="">
                        <div>璟泰公馆</div>
                        <div>
                          <span></span>
                          <span>32</span>
                        </div>
                        <div>4.4公里·¥¥¥¥·中餐·亚洲料理</div>
                      </a>
                    </div>
                  </div>
                  <div class="res_3">
                    <img src="/detail_f2_img/nearby/xiheyayuan.jpg" alt="" />
                    <div>
                      <a href="">
                        <div>羲和雅苑北京烤鸭</div>
                        <div>
                          <span></span>
                          <span>52</span>
                        </div>
                        <div>5.5公里·¥¥-¥¥¥·中餐·亚洲料理</div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="play">
                <div>景点</div>
                <div>在5公里内共找到 64 个地点</div>
                <div class="trip">
                  <div class="trip_1">
                    <img src="/detail_f2_img/nearby/foxiangge.jpg" alt="" />
                    <div>
                      <a href="">
                        <div>颐和园佛香阁</div>
                        <div>
                          <span></span>
                          <span>262</span>
                        </div>
                        <div>0.3公里·建筑</div>
                      </a>
                    </div>
                  </div>
                  <div class="trip_2">
                    <img src="/detail_f2_img/nearby/changlang.jpg" alt="" />
                    <div>
                      <a href="">
                        <div>颐和园长廊</div>
                        <div>
                          <span></span>
                          <span>3395</span>
                        </div>
                        <div>1.4公里·景点与地标</div>
                      </a>
                    </div>
                  </div>
                  <div class="trip_3">
                    <img src="/detail_f2_img/nearby/qinghua.jpg" alt="" />
                    <div>
                      <a href="">
                        <div>清华大学</div>
                        <div>
                          <span></span>
                          <span>52</span>
                        </div>
                        <div>4.5公里·教育机构</div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧 地图 -->
          <div class="area1_right">
            <iframe
              src="/map.html"
              width="480"
              height="550"
              frameborder="0"
              scrolling="no"
            ></iframe>
          </div>
        </div>
      </div>
      <!-- 分享-撰写点评/上传照片 -->
      <div class="share">
        <div class="share_f1">
          <h1>分享</h1>
        </div>
        <div class="share_f2">
          <div>撰写点评</div>
          <div>上传照片</div>
        </div>
      </div>
      <!-- 点评 -->
      <h2>点评</h2>
      <div class="point_review">
        <div class="point">
          糟透了<el-progress :percentage="2"></el-progress> 差<el-progress
            :percentage="8"
          ></el-progress>
          一般<el-progress :percentage="12"></el-progress> 很好<el-progress
            :percentage="21"
          ></el-progress>
          非常棒<el-progress :percentage="57"></el-progress>
        </div>
        <div class="review">
          <div class="review_f1">
            <div>筛选条件</div>
            <div>中文简体 &nbsp;﹀</div>
            <div>最近</div>
          </div>
          <div class="review_f2">当前仅展示部分热评</div>
          <!-- 评论详情区 -->
          <div class="cus_review">
            <div class="cus_review_out">
              <div class="cus_head">
                <img src="/detail_f2_img/img_scenic/head.png" alt="" />
                <h3>Northxingsea</h3>
              </div>
              <div class="cus_xian1"></div>
              <div class="cus_talk">
                <div class="cus_tit">园区非常大，有些景点需单独付费</div>
                <div class="cus_tag">2021年05月 • 结伴旅行</div>
                <div class="cus_arti">
                  30元的门票仅包括公园正门，比如苏州街等部分景点需要收费，每个景点都是10元。但即使是只买门票，也建议留出2-3个小时游览。景区很大，一定要穿轻便的鞋和衣服
                </div>
                <div class="cus_dat">撰写日期：2021年05月11日</div>
                <div class="cus_tip">
                  此点评为 Tripadvisor 会员所写的主观评论，并不代表 TripAdvisor
                  的观点。
                </div>
                <div class="cus_xian2"></div>
              </div>
            </div>
          </div>
          <div class="cus_review">
            <div class="cus_review_out">
              <div class="cus_head">
                <img src="/detail_f2_img/img_scenic/head.png" alt="" />
                <h3>Northxingsea</h3>
              </div>
              <div class="cus_xian1"></div>
              <div class="cus_talk">
                <div class="cus_tit">园区非常大，有些景点需单独付费</div>
                <div class="cus_tag">2021年05月 • 结伴旅行</div>
                <div class="cus_arti">
                  30元的门票仅包括公园正门，比如苏州街等部分景点需要收费，每个景点都是10元。但即使是只买门票，也建议留出2-3个小时游览。景区很大，一定要穿轻便的鞋和衣服
                </div>
                <div class="cus_dat">撰写日期：2021年05月11日</div>
                <div class="cus_tip">
                  此点评为 Tripadvisor 会员所写的主观评论，并不代表 TripAdvisor
                  的观点。
                </div>
                <div class="cus_xian2"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      value: null,
      imgs: [],
      activeIndex: "",
      value: 5,
      swiperOptionTop: {
        loop: true,
        loopedSlides: 5,
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 5,
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.$swiper;
      const swiperThumbs = this.$refs.swiperThumbs.$swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });

    let jid = this.$route.query.jid;
    let url = `/detail?jid=${jid}`;
    this.axios.get(url).then(res => {
      console.log(res);
      this.data = res.data.data[0];
      let imgs = res.data.data.map(value => {
        return value.pic;
      });
      this.imgs = imgs;
      console.log(imgs);
    });
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
p {
  text-indent: 2em;
  margin: 10px 20px;
  letter-spacing: 3px;
  line-height: 32px;
  width: 290px;
  height: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.addr {
  padding: 10px 0;
  text-decoration: underline;
  color: #333333;
  font-weight: 600;
}
.center {
  margin: 0 auto;
  width: 1200px;

  // 导航栏
  .el-menu-demo {
    border-top: 1px solid #e0e0e0;
    > .el-menu-item {
      height: 50px;
      margin: 0 15px;
      border-bottom-color: #000;
    }
    .is-active {
      font-weight: 800;
    }
  }
  //面包屑
  .el-breadcrumb {
    margin: 18px 0;
  }

  //景点标题区域
  .scenic_title {
    display: flex;
    justify-content: space-between;

    .scenicTitle_right {
      width: 100px;
      display: flex;
      justify-content: space-evenly;

      button {
        background-color: #fff;
        width: 30px;
        height: 30px;
        border: 2px solid black;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      button:hover {
        background-color: #000;

        .iconfont {
          color: #fff;
        }
      }
    }
  }

  // 景点标签区域
  .city_tag {
    display: flex;
    padding: 20px 0;
    div {
      display: flex;
      margin-right: 10px;
      line-height: 20px;

      a {
        text-decoration: none;
        color: #000;
      }
    }
  }
  // 景点展示区域 评价+照片
  .scenic_show {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 500px;
    padding: 20px 0;

    .scenicShow_left {
      box-sizing: border-box;
      display: flex;
      flex-flow: column;
      width: 360px;
      height: 100%;
      //overflow: hidden;
      border: 2px solid #e4e4e4;
      border-radius: 15px;
      box-shadow: 0px 0px 3px 1px #e4e4e4;
      padding: 10px 20px;
    }
  }
  //轮播图片引入样式
  .swiperScenic {
    width: 820px;
    height: 100%;
    background-color: black;
  }

  .swiper {
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }

    &.gallery-top {
      height: 80%;
      width: 100%;
    }
    &.gallery-thumbs {
      height: 20%;
      box-sizing: border-box;
      padding: gap 0;
    }
    &.gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }
    &.gallery-thumbs .swiper-slide-active {
      opacity: 1;
    }
  }

  // 左侧点评区
  .scenicShow_left_rev {
    width: 330px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;

    h1 {
      font-size: 20px;
    }

    div {
      margin: 5px 0;
    }
    .rev_des {
      width: 100%;
      height: 60px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.area_left_right {
  display: flex;
  justify-content: space-between;
  .area1_left {
    display: flex;
    flex-flow: column;
    margin-top: 10px;
    .nearby {
      display: flex;

      .res {
        display: flex;
        flex-flow: column;
        margin-right: 100px;
        .res_1,
        .res_2,
        .res_3 {
          display: flex;
          margin: 10px 0;
          img {
            width: 80px;
            height: 80px;
            margin-right: 10px;
          }
          a {
            display: flex;
            flex-flow: column;
            text-decoration: none;
            color: #333333;
            div {
              margin-bottom: 8px;
              font-size: 14px;
            }
          }
        }
      }
      .play {
        display: flex;
        flex-flow: column;
        .trip {
          display: flex;
          flex-flow: column;

          .trip_1,
          .trip_2,
          .trip_3 {
            display: flex;
            margin: 10px 0;
            img {
              width: 80px;
              height: 80px;
              margin-right: 10px;
            }
            a {
              display: flex;
              flex-flow: column;
              text-decoration: none;
              color: #333333;
              div {
                margin-bottom: 8px;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}
//分享-撰写点评/上传照片

.share {
  width: 100%;
  display: flex;
  flex-flow: column;
  .share_f1 {
    margin-bottom: 20px;
  }
  .share_f2 {
    display: flex;

    div {
      text-align: center;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      width: 110px;
      line-height: 45px;
      border: 2px solid #000;
      border-radius: 25px;
      margin: 0 13px 20px 0;
      &:hover {
        background-color: #000;
        color: #fff;
      }
    }
  }
}

h2 {
  width: 50px;
  margin-bottom: 15px;
  border-bottom: 3px solid #000;
}
.point_review {
  display: flex;
  justify-content: space-between;
  .review {
    width: 750px;
    display: flex;
    flex-flow: column;
  }
  .review_f1 {
    display: flex;
    margin-bottom: 10px;
    div {
      text-align: center;
      width: 100px;
      line-height: 35px;
      border: 2px solid #e0e0e0;
      border-radius: 25px;
      margin: 0 5px;
    }
  }
  .review_f2 {
    font-size: 12px;
    border-bottom: 1px solid #e0e0e0;
  }
  .cus_review {
    display: flex;
    flex-flow: column;
    .cus_review_out {
      display: flex;
      flex-flow: column;

      .cus_head {
        display: flex;
        align-items: center;
        margin: 15px 0;
        img {
          width: 50px;
          height: 50px;
          border-radius: 25px;
        }
      }
      .cus_talk > div {
        margin-bottom: 10px;
      }
      .cus_xian1,
      .cus_xian2 {
        width: 100%;
        height: 1px;
        background-color: #e0e0e0;
        margin-bottom: 10px;
      }
      .cus_tit {
        font-size: 17px;
        font-weight: 600;
      }
      .cus_tag,
      .cus_arti {
        font-size: 15px;
        font-weight: 300;
      }
      .cus_dat,
      .cus_tip {
        font-size: 12px;
        font-weight: 200;
      }
    }
  }
}
// 点评
.el-progress,
.el-progress--line {
  width: 300px;
  height: 100px;
  .el-progress-bar__outer {
    height: 100%;
    .el-progress-bar__inner {
      height: 100%;
      background-color: #00aa6c;
    }
  }
}
</style>
